import React, { Fragment, useEffect } from 'react'
import {
  Card,
  Button,
} from 'antd'

import Canvas from '../../designer/dnd/Canvas'
import Preview from '../../designer/dnd/Preview'

import { useRecoilState, useSetRecoilState } from 'recoil';
import { designerState } from '../../store'

interface IProps {
  children?: any;
}

export default function Home (props: IProps) {
  const [pageData, setPageData] = useRecoilState(designerState.pageDataAtom);
  const setPreview = useSetRecoilState(designerState.isPreviewAtom);
  const setSelectedNode = useSetRecoilState(designerState.selectedNodeAtom);

  const emptyPage = () => {
    // 清空数据
    setPageData([])
    setSelectedNode({})
  }

  useEffect(() => {
    console.log('Home', pageData)
  }, [pageData])

  // 执行预览
  const doPreview = () => {
    setPreview(true)
  }

  return (
    <Fragment>
      <Card
        title="页面" 
        bordered={false}
        extra={
          <div>
            <Button type="ghost" onClick={ doPreview } style={{ margin: '0 20px' }}>预览</Button>  
            <Button type="primary" onClick={ emptyPage }>清空</Button>
          </div>
        } 
      >
        <Canvas />

        <Preview />
      </Card>
    </Fragment>
  )
}
